<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor); height: 600px;">
    <!-- playground-fold-end -->

    <ui5-dialog id="dialog" stretch header-heading="Wizard">
        <ui5-wizard id="wiz" content-layout="SingleStep">
            <ui5-wizard-step icon="product" title-text="Product type" selected="">
                <div style="display: flex; min-height: 200px; flex-direction: column;">
                    <ui5-title>1. Product Type</ui5-title><br />
                    <ui5-message-strip>
                        The Wizard control is supposed to break down large tasks, into smaller steps, easier for the
                        user to work with.
                    </ui5-message-strip><br />
                    <ui5-label>Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus
                        sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper,
                        volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend
                        tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec
                        dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend
                        sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis
                        metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend,
                        commodo tortor et, varius quam. Aliquam erat volutpat.
                    </ui5-label>
                </div>
            </ui5-wizard-step>
            <ui5-wizard-step icon="hint" title-text="Product Information" disabled="">
                <div style="display: flex;flex-direction: column">
                    <ui5-title>2. Product Information</ui5-title><br />
                    <ui5-label>
                        Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero
                        sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo
                        sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus,
                        molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada
                        nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in
                        libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar,
                        sapien
                    </ui5-label>
                    <div style="display: flex; flex-direction: column;">
                        <div
                            style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
                            <ui5-label>Name</ui5-label>
                            <ui5-input placeholder="product name..."></ui5-input>
                        </div>
                        <div
                            style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
                            <ui5-label>Weight</ui5-label>
                            <ui5-input value="3.65"></ui5-input>
                        </div>
                        <div
                            style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
                            <ui5-label>Manifacturer</ui5-label>
                            <ui5-select>
                                <ui5-option selected="">Apple</ui5-option>
                                <ui5-option>Samsung</ui5-option>
                                <ui5-option>Huawei</ui5-option>
                            </ui5-select>
                        </div>
                        <div
                            style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
                            <ui5-label>5 years guarantee included</ui5-label>
                            <ui5-switch id="wiz-sw"></ui5-switch>
                        </div>
                    </div>
                </div>
            </ui5-wizard-step>
            <ui5-wizard-step icon="action-settings" title-text="Options" disabled="">
                <div style="display: flex; flex-direction: column;">
                    <ui5-title>3. Options</ui5-title><br />
                    <ui5-label>
                        Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero
                        sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo
                        sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus,
                        molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada
                        nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in
                        libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar,
                        sapien
                    </ui5-label>
                    <ui5-message-strip>
                        The Wizard control is supposed to break down large tasks, into smaller steps, easier for the
                        user to work with.
                    </ui5-message-strip><br />
                    <div style="display: flex; flex-direction: column;">
                        <div
                            style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
                            <ui5-label>Manifacture date</ui5-label>
                            <ui5-date-picker id="wiz-dp"></ui5-date-picker>
                        </div>
                    </div>
                </div>
            </ui5-wizard-step>
        </ui5-wizard>
        <ui5-bar id="footer" slot="footer" design="Footer">
            <ui5-button id="prevButton" design="Emphasized" slot="endContent">Previous Step</ui5-button>
            <ui5-button id="nextButton" design="Emphasized" slot="endContent">Next step</ui5-button>
            <ui5-button id="wiz-finalize" design="Emphasized" slot="endContent">Finalize</ui5-button>
            <ui5-button id="cancel" design="Transparent" slot="endContent">Cancel</ui5-button>
        </ui5-bar>
    </ui5-dialog>
    <ui5-button id="button">Open dialog</ui5-button>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
